<template>
	<view>
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">提交请假单 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">请假记录 <view :class="tabIndex==1?'active':''"></view></view>
		</view>
		
		<view v-if='tabIndex==0' class="form">
			<view class="form_item">
				<view class="title"><text class="colorOrange">*</text>请假班级</view>
				<view style="display: flex;align-items: center;">
					<picker @change="bindClassChange" :range-key="'className'" :value="class_index" :range="array" style="font-weight: bold;">
						<view class="uni-input">{{array[class_index].className}}</view>
					</picker>
					<image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view>
			
			<view class="form_item">
				<view class="title"><text class="colorOrange">*</text>请假类型</view>
				<view style="display: flex;align-items: center;">
					<picker @change="bindTypeChange" :range-key="'name'" :value="type_index" :range="array1" style="font-weight: bold;">
						<view class="uni-input">{{array1[type_index].name}}</view>
					</picker>
					<image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view>
			
			<view class="form_item">
				<view class="title"><text class="colorOrange">*</text>开始时间</view>
				<view style="display: flex;align-items: center;">
					<uni-datetime-picker
						type="datetime"
						v-model="startTime"
					/>
				</view>
			</view>
			
			<view class="form_item">
				<view class="title"><text class="colorOrange">*</text>结束时间</view>
				<view style="display: flex;align-items: center;">
					<uni-datetime-picker
						type="datetime"
						v-model="endTime"
					/>
				</view>
			</view>
			
			<view class="form_textarea">
				<view class="title">请假原因</view>
				<view style="margin-top:10px;"><textarea placeholder="请输入您的请假原因" v-model="reason" style="width:100%;height: 100px;font-size:26rpx;"></textarea></view>
			</view>
			
			<view style="border-top:10px solid #F8F8F8;padding: 10px;flex-direction: column;">
				<view class="title" style="font-weight: bold;margin-bottom: 10px;">选择审批人</view>
				<view class="seletTeacher" style="position: relative;">
					<picker @change="bindTeacherChange" :range-key="'name'" :value="teacher_index" :range="ClassTeacher">
						<view class="addBtn" v-if='teacher_index==0'>+</view>
						<view v-else style="position: relative;">
							<image :src="ClassTeacher[teacher_index].image" style="width: 50px;height: 50px;border-radius: 50%;"></image>
						</view>
					</picker>
					<image v-if='teacher_index!=0' @tap="delteacher" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/icon_error.png" style='width: 30rpx;height: 30rpx;position: absolute;top:-5rpx;left: 80rpx;'></image>
				</view>
				<view class="btn" @tap="submitLeaveApply">
					确认提交
				</view>
			</view>
		</view>
		
		<view class="">
			<view v-for='itm in record' class="list" v-if="tabIndex==1&&!isNull">
				<view class="item" style="display: flex;justify-content: space-between;">
					 <view>审批人：{{itm.teacherName}}</view>
					 <view style="color:#999999">{{itm.createTime}}</view>
				</view>
				<view class="item"><view class="title">请假班级：</view>{{itm.className}}</view>
				<view class="item"><view class="title">请假类型：</view>{{itm.typeName}}</view>
				<view class="item"><view class="title">开始时间：</view>{{itm.startTime}}</view>
				<view class="item"><view class="title">结束时间：</view>{{itm.endTime}}</view>
				<view class="item"><view class="title">请假原因：</view>{{itm.reason}}</view>
				<!-- <view class="item" v-if='itm.status==1'><view class="title">拒绝原因：</view>{{itm.reason}}</view> -->
				
				<view class="item status">
					<view v-if='itm.status==0'>
					  <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/leave_status0.png"></image> 请假申请待审批
					</view>
					<view v-if='itm.status==2'>
					   <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/leave_status1.png"></image> 请假已被批准
					</view>	
					<view v-if='itm.status==1' style="display: flex;">
						<view>
						<image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/leave_status2.png"></image>理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。
						</view>
						<!-- <view>{{itm.msg}}</view> -->
					</view>
				</view>
			</view>
			<view v-if="tabIndex==1&&isNull" class="order_null">
				<image src="../../static/null/jl@2x.png"></image>
				<text>暂时还没有记录~</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				list:[  //status: 0:待审核  1:已通过   -1:未通过
					{"teacher":'顾小伟老师','class':'评弹班', 'type':'事假', time:'02-13 10:36',status:0,'start':'2021/7/27 09:30', end:'2021/7/27 17:30', memo:'因为个人原因，明天要请假1天。','msg':'理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。'},
					{"teacher":'顾小伟老师','class':'评弹班', 'type':'事假', time:'02-13 10:36',status:1,'start':'2021/7/27 09:30', end:'2021/7/27 17:30', memo:'因为个人原因，明天要请假1天。','msg':'理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。'},
					{"teacher":'顾小伟老师','class':'评弹班', 'type':'事假', time:'02-13 10:36',status:-1,'start':'2021/7/27 09:30', end:'2021/7/27 17:30', memo:'因为个人原因，明天要请假1天。','msg':'理由不合适，给予驳回处理。如有必要，请详细说明请假原因，并重新提交申请。'}
				],
				teachers_avatar:['', 'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png','https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a2.png','https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a3.png'],
				teachers:['请选择','王老师','陈老师','李老师'],
				class_index:0,
				type_index:0,
				types:['请选择','事假','其他'],
				classes:['请选择','书法班', '评演班'],
				startTime:"",
				endTime:"",
				teacher_index:0,
				pageNum:1,
				pageSize:10,
				array:[],
				array1:[],
				classId:'',
				type:'',
				reason:'',
				ClassTeacher:[],
				record:'',
				isNull:false,
				shopId:''
			}
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
			// this.getLeaveApplyType()
			// this.getClassOrdersList()
		},
		onShow() {
			this.getLeaveApplyType()
			this.getClassOrdersList()
			this.getLeaveApplyLog()
		},
		methods: {
			delteacher(){
				console.log(this.teacher_index)
				this.teacher_index = 0
			},
			// 请假类型
			getLeaveApplyType(){
				// this.array1 = []
				let _this = this
				this.$api.getLeaveApplyType({
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.length)
						_this.array1 = res.data.dataMap
						_this.type = _this.array1[0].id
						console.log(_this.array1)
					}
				})
				
			},
			// 请假班级
			async getClassOrdersList(){
				let _this = this
				console.log(1)
			   await this.$api.getClassOrdersList({
					status:0
				}, this.pageNum,this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						 _this.datalist = res.data.dataMap.list
						_this.array = res.data.dataMap.list
						_this.classId = _this.array[0].classOrActivityId
						_this.getClassTeacher(_this.classId)
					}
				})
				
			},
			getClassTeacher(id) {
				this.$api.getClassTeacher({
					scheduleId: id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.ClassTeacher = res.data.dataMap
						this.ClassTeacher.unshift({
							name:'请选择'
						})
					}
				})
			},
			submitLeaveApply(){
					if(this.classId==='') {
						uni.showToast({
							title: '请选择班级！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.type===''){
						uni.showToast({
							title: '请选择请假类型！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.startTime===''){
						console.log(111)
						uni.showToast({
							title: '请选择请假时间！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.endTime===''){
						uni.showToast({
							title: '请选择请假时间！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.reason===''){
						uni.showToast({
							title: '请输入请假原因！',
							duration: 1500,
							icon: "none",
							
						});
					}else if(this.checkUserId===undefined){
						uni.showToast({
							title: '请选择审批人！',
							duration: 1500,
							icon: "none",
							
						});
					}else{
					this.$api.submitLeaveApply({
						classId:this.classId,
						type:this.type,
						reason:this.reason,
						startTime:this.startTime,
						endTime:this.endTime,
						checkUserId:this.checkUserId
					}).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data.dataMap)
							uni.showToast({
								title: '提交成功！',
								duration: 1500,
								icon: "none",
								
							});
							this.classId = ''
							this.reason = ''
							this.type = ''
							this.teacher_index = 0
							this.startTime = ''
							this.endTime = ''
							this.tabIndex = 1
							this.getLeaveApplyLog()
						}
					})
			}
			
			},
			chgTab(index){
				this.tabIndex = index;
			},
			bindClassChange: function(e) {
				var _this = this
				_this.class_index = e.target.value
				_this.classId = _this.array[e.target.value].classOrActivityId
				console.log(_this.classId)
				_this.getClassTeacher(_this.classId)
			},
			bindTypeChange: function(e) {
				var _this = this
				_this.type = _this.array1[e.target.value].id
				_this.type_index = e.target.value
				console.log(_this.type)
			},
			bindTeacherChange:function(e){
				this.teacher_index = e.target.value;
				console.log(this.teacher_index)
				this.checkUserId = this.ClassTeacher[e.target.value].id
				console.log(this.checkUserId)
			},
			getLeaveApplyLog(){
				this.$api.getLeaveApplyLog({
					shopId:this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.record = res.data.dataMap.list
						this.isNull = this.record.length < 1 ? true : false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 60rpx auto;
		width: 300rpx;
		height: 300rpx;
	}
	.uni-input{color:#999999;font-weight: bold;}
	page{background: #F8F8F8;}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  .list{ background-color: white;margin-top:10px;padding:10px;color:#666666;line-height: 40rpx;}
  
  .item{
	  display: flex;
  }
  .status{border-top:1px solid #EEEEEE;margin-top:10px;padding-top:10px;color:#333333;font-weight: bold;}
  .form{background-color: white;margin-top:10px;}
  .form_item{
	  border-bottom: 1px solid #EEEEEE;
	  padding:10px;
	  display: flex;
	  justify-content: space-between;
	  align-items:center;
	  .title{font-weight: bold;color:#333333}
  }
  .form_textarea{
	  padding:10px ;
	  .title{font-weight: bold;}
  }
.btn{
   background-color: #FF5533;
   border-radius:50px;
   padding: 10px;
   width: 80%;
   font-size: 28rpx;
   margin: 20px auto;
   color:white;text-align: center;
  }
  .addBtn{
	  border: 1px solid #d3d3d3;border-radius:5px;width:60px;height:60px;font-size: 100rpx;color:#e7e7e7;display: flex;justify-content: center;align-items: flex-end;
  }
</style>
